<template>
  <selectPop
    v-model:dialogVisible="visible"
    selectKey="groupId"
    v-model:selecedList="list"
    :getData="basicConfigService.pageListWxGroupResDto"
    selectTitle="群聊"
    title="选择群聊"
    type="checkBox"
    keyName="wxGroupName"
    v-model:searchParams="searchParams"
    :formItems="formItems"
  >
  <template #checkboxName="{ item }">
      {{ item.wxGroupName }}
    </template>
    <template #selectName="{ item }">
      <Tooltip :text="item.wxGroupName"></Tooltip>
    </template>
  </selectPop>
</template>

<script setup lang="ts">
import selectPop from '@/components/select-pop/index.vue'
import { basicConfigService } from '@/api/basicConfig'
const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  item: {
    type: Object,
  },
  handleSearch: {
    type: Function,
  },
  showManager: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
  },
  type: {
    type: Number,
  },
  selecedList: {
    type: Array,
  },
})
const options = ref([])

const formItems = ref([
  {
    placeholder: '请输入群聊名称',
    key: 'wxGroupName',
    type: 'input',
  },
  {
    placeholder: '请选择关联网格经理',
    key: 'managerId',
    type: 'select',
    options: options,
  },
  {
    key: 'tagIds',
    type: 'label',
    selecedList: [],
    tagType: 1, //1：用户标签
  },
])
const visible = ref(props.dialogVisible)
const list = ref(props.selecedList)
const emit = defineEmits(['update:dialogVisible', 'update:selecedList'])
watch(visible, (val) => {
  if (!val) emit('update:selecedList', list.value)
  emit('update:dialogVisible', val)
})
const searchParams = ref({})
const getAllManager = () => {
  basicConfigService.getAllManager({ data: {} }).then((res) => {
    let data = res.data.map((e) => {
      return {
        value: e.managerId,
        label: e.managerName,
      }
    })
    options.value.push(...data)
  })
}
onMounted(() => {
  getAllManager()
})
</script>
<style lang="scss" scoped>
.dialog__body {
  display: flex;

  .left {
    width: 650px;
  }

  .right {
    flex: 1;
    width: 0;
    border-left: 1px solid #ccc;
    padding-left: 10px;
  }
}
</style>
